<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link href="../css/header.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/iconfont.css">
</head>
<body>
	<div id="App" v-cloak>
		<header class="mui-bar mui-bar-nav" id="header">
		  <a class="mui-btn mui-btn-link mui-btn-nav mui-pull-left" href="#" id="barcode" onclick="openBarcode()">
		    <p class="mui-media-object mui-pull-left iconfont02 icon-scan"></p>
		  </a>
		
		
			<div class="mui-input-row">
			  <input type="search" id="keywords" style="padding-top: 0px;"  placeholder="请输入站点关键字"  oninput="oninput()">
			</div>  	
		
		   <a class="mui-btn mui-btn-link mui-btn-nav mui-pull-right" id="bar">
		    <p id="bar-icon" class="mui-media-object iconfont02 icon-zhandian2"></p>
		  </a> 
		</header>
		<div class="headerContent">
			<div class="mui-table-view mui-grid-view " id="content01">
				<div class="mui-table-view-cell mui-media mui-col-xs-4">
					<a >
						<span class="mui-text-center" id="evrNumTotal">0</span>
						<div class="mui-media-body ">系统报警</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-4">
					<a >
						<span class="mui-text-center " id="orderNumber">0</span>
						<div class="mui-media-body ">运维工单</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-4">
					<a>
						<span class="mui-text-center" id="dcsNumTotal">0</span>
						<div class="mui-media-body">监控站点</div>
					</a>
				</div>	
			</div>	
		</div>
		
		<div>
			<div id="list">
				<ul class="mui-table-view mui-row" id="siteDetails" v-cloak>
					<li class="mui-table-view-cell mui-table-view"  v-for="(item,index) in items" >
						<a class="mui-navigate-right" @click="getItem(index)"  >
							<span class="mui-pull-left iconfont icon-company"></span>
							<span style="font-size: 18px;">{{item.dcsName}}</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/mui.common.js"></script>
<script src="../js/vue.min.js"></script>
<script type="text/javascript">
	
	var mv = new Vue({
		el:"#App",
		data:{
			items:[],
			stationList:[]
		},
		methods:{
			getItem:function(index){
				console.log(index)
	
			}
		},
		mounted:function(){
			mui.init();
			mui.plusReady(function(){
				plus.navigator.setStatusBarStyle('light');
				plus.navigator.setStatusBarBackground('#393D45');
				services.getStations().then((data)=>{
					//console.log(JSON.stringify(data))
					var list = [];
					for(var index in data.rows) {
						var item = data.rows[index];
						var type = parseInt(item.dcsType); //站点类型
						if(type == 0){
							list.push(item);
						}
					}
					this.stationList = list;
					mv.items = list;
				
				})
			})
		},
		computed:{
			match:{
				get:function() {
					return;
				},
				set:function(data) {
					if(data.type == 0){
						if(data.text!=""){
							this.items = stationList.filter(function (item) {
							  return item.dcsName.match(data.text);
							})
						}else if(data.text==""){
							this.items = stationList
						}
					}else if(data.type == 1){
						if(data.DistId != 0 ){
							this.items = stationList.filter(function (item) {
							  //console.log("DistId:"+item.dcsDistrictId)
							  return item.dcsDistrictId == data.DistId;
							})
						}else if(data.CityId !=0 ){
							this.items = stationList.filter(function (item) {
								//console.log("CityId:"+item.dcsCityId)
								return item.dcsCityId == data.CityId;
							})
						}else if(data.ProvId !=0 ){
							this.items = stationList.filter(function (item) {
								//console.log("ProvId:"+item.dcsProvinceId)
								return item.dcsProvinceId == data.ProvId;
							})
						}else {
							this.items = stationList
						}
					}
	
				}
			}
		}
	});
	
</script>
<style type="text/css">
	
		html,body {
			height: calc(100% - 51px);
		}
		.mui-segmented-control.mui-scroll-wrapper{
			height:initial;
			height:80px;
		}
		.mui-segmented-control.mui-scroll-wrapper .mui-scroll{
			height: 80px;
		}
		.mui-fullscreen{
			position: initial;
			background-color:#EFEFF4;
		}
		.mui-content-padded{
			background-color:white;
			margin:initial;
			padding:6px;
			padding-left:10px;
			font-size: 14px;
			border-bottom: 0.5px solid #E1E1E1;
			color:lightgray;
			margin-top:9px;
		}
		h5:nth-child(1){
			padding-top:20px;
		}
		.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
			padding: 13px 18px;
		}
		.mui-content{
			margin-top:218px;
		}
		.mui-bar{
			height:60px;
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-around;
		}
		.mui-search .mui-placeholder{
			top:-6px;
			background-color: #eee;
		}
		.mui-table-view.mui-grid-view{
			padding: 10px 10px 32px 0;
		}
		.mui-input-row{
			width: 300px;
			height:28px;
			border-radius: 8px;
			vertical-align: middle;
			
		}
		p:nth-child(1){
			margin-top: -7px;
		}
		.headerContent{
			width:100%;
			position: fixed;
			top:60px;
			z-index: 5;
		}
		.mui-bar .mui-btn-link{
			line-height:initial;
		}
		.mui-bar .mui-btn-link{
			line-height: initial;
		}
		#siteDetails{
			margin-top:157px;
			
		}
	
		/*角标定位*/
		.mui-btn .mui-badge{
			background-color: #dd524d;
			position:absolute;
			top:15%;
			right:1px;
			font-size:12px;
			padding: 5px 5px;
		}
		.iconfont{
			  font-family: "iconfont" !important;
			  font-size: 30px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			  color: #0099CC;
			}
		.iconfont01{
			font-family: "iconfont" !important;
		  font-size: 24px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  color: #F0AD4E;
		}
		.iconfont02{
			font-family: "iconfont" !important;
		  font-size: 26px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  color: white;
		  z-index: 999;
		}
		.iconfont03{
			font-family: "iconfont" !important;
		  font-size: 28px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  color: white;
		  z-index: 999;
		}
		.mui-bar .mui-btn.mui-pull-right{
			    margin-right: 8px;
		}

		.right{
			position: absolute;
			top:0;
			left:48px;
			line-height: 53px;
		}
		.mui-table-view-cell>a:not(.mui-btn){
			color:gray;
		}
		#content01>div>a>div{
			width: 100%;
			color:#C7C7CC
		}
		#content01>div>a>span{
			color:#DD524D;
			font-weight: 600;
		}
		.mui-bar .mui-btn-link{
			line-height: 40px;
		}
		.mui-input-clear{
			color:#C7C7CC
		}
		.mui-segmented-control .mui-control-item{
			line-height: 24px;
		}
	
		.gap{
			height:9px;
			width:100%;
			position: fixed;
			background-color:#efeff4 ;
			z-index: 2;
		}
			
		.mui-pull-right{
			font-size:14px;
			color:lightgray;
		}
		.text-item{
			font-size: 20px;
		}	
		
		.mui-table-view-cell:after,
		.mui-table-view-cell:before {
			height: 1px;
		}
		.mui-table-view-cell:last-child:after,
		.mui-table-view-cell:last-child:before {
			height: 1px;
		}
		
		[v-cloak] {
			display: none;
		}
		
</style>
</html>